import React from 'react'
import { 
  Drawer, 
  Space, 
  Typography, 
  Switch, 
  Button, 
  Divider,
  Tooltip,
  message
} from 'antd'
import { 
  SettingOutlined,
  BgColorsOutlined,
  LayoutOutlined,
  ReloadOutlined,
  CheckOutlined
} from '@ant-design/icons'
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '@/store'
import { 
  updateThemeSettings, 
  setLayoutStyle, 
  setPrimaryColor, 
  resetThemeSettings 
} from '@/store/slices/themeSlice'
import { presetColors, LayoutStyle } from '@/types/theme'
import './index.less'

const { Title, Text } = Typography

interface ThemeSettingsProps {
  visible: boolean
  onClose: () => void
}

const ThemeSettings: React.FC<ThemeSettingsProps> = ({ visible, onClose }) => {
  const dispatch = useDispatch()
  const { settings } = useSelector((state: RootState) => state.theme)

  // 处理设置更新
  const handleSettingChange = (key: string, value: any) => {
    dispatch(updateThemeSettings({ [key]: value }))
  }

  // 处理布局风格切换
  const handleLayoutChange = (layout: LayoutStyle) => {
    dispatch(setLayoutStyle(layout))
    message.success('布局风格已更新')
  }

  // 处理主色调更新
  const handleColorChange = (color: string) => {
    dispatch(setPrimaryColor(color))
    message.success('主题色已更新')
  }

  // 重置所有设置
  const handleReset = () => {
    dispatch(resetThemeSettings())
    message.success('主题设置已重置')
  }

  return (
    <Drawer
      title={
        <Space>
          <SettingOutlined />
          主题设置
        </Space>
      }
      width={320}
      open={visible}
      onClose={onClose}
      placement="right"
      className="theme-settings-drawer"
      extra={
        <Tooltip title="重置设置">
          <Button 
            type="text" 
            icon={<ReloadOutlined />} 
            onClick={handleReset}
            size="small"
          />
        </Tooltip>
      }
    >
      <div className="theme-settings-content">
        
        {/* 风格设置 */}
        <div className="setting-section">
          <Title level={5}>
            <LayoutOutlined /> 风格设置
          </Title>
          <div className="layout-styles">
            <div 
              className={`layout-item ${settings.layoutStyle === 'side' ? 'active' : ''}`}
              onClick={() => handleLayoutChange('side')}
            >
              <div className="layout-preview">
                <div className="preview-sidebar"></div>
                <div className="preview-content">
                  <div className="preview-header"></div>
                  <div className="preview-body"></div>
                </div>
              </div>
              <Text>侧边栏</Text>
              {settings.layoutStyle === 'side' && <CheckOutlined className="check-icon" />}
            </div>
            
            <div 
              className={`layout-item ${settings.layoutStyle === 'top' ? 'active' : ''}`}
              onClick={() => handleLayoutChange('top')}
            >
              <div className="layout-preview">
                <div className="preview-content">
                  <div className="preview-header"></div>
                  <div className="preview-body"></div>
                </div>
              </div>
              <Text>顶部栏</Text>
              {settings.layoutStyle === 'top' && <CheckOutlined className="check-icon" />}
            </div>
            
            <div 
              className={`layout-item ${settings.layoutStyle === 'mix' ? 'active' : ''}`}
              onClick={() => handleLayoutChange('mix')}
            >
              <div className="layout-preview">
                <div className="preview-sidebar small"></div>
                <div className="preview-content">
                  <div className="preview-header"></div>
                  <div className="preview-body"></div>
                </div>
              </div>
              <Text>混合模式</Text>
              {settings.layoutStyle === 'mix' && <CheckOutlined className="check-icon" />}
            </div>
          </div>
        </div>

        <Divider />

        {/* 主题颜色 */}
        <div className="setting-section">
          <Title level={5}>
            <BgColorsOutlined /> 主题颜色
          </Title>
          <div className="color-picker">
            {presetColors.map((color) => (
              <div
                key={color}
                className={`color-item ${settings.primaryColor === color ? 'active' : ''}`}
                style={{ backgroundColor: color }}
                onClick={() => handleColorChange(color)}
              >
                {settings.primaryColor === color && <CheckOutlined />}
              </div>
            ))}
          </div>
        </div>

        <Divider />

        {/* 开关设置 */}
        <div className="setting-section">
          <Title level={5}>功能设置</Title>
          
          <div className="setting-item">
            <div className="setting-label">
              <Text>开启暗黑模式</Text>
            </div>
            <Switch
              checked={settings.isDarkMode}
              onChange={(checked) => handleSettingChange('isDarkMode', checked)}
            />
          </div>

          <div className="setting-item">
            <div className="setting-label">
              <Text>开启多页签</Text>
            </div>
            <Switch
              checked={settings.enableTabs}
              onChange={(checked) => handleSettingChange('enableTabs', checked)}
            />
          </div>

          <div className="setting-item">
            <div className="setting-label">
              <Text>只展开一个一级菜单</Text>
            </div>
            <Switch
              checked={settings.enableOnlyOneTab}
              onChange={(checked) => handleSettingChange('enableOnlyOneTab', checked)}
            />
          </div>
        </div>

        <Divider />

        {/* 显示设置 */}
        <div className="setting-section">
          <Title level={5}>显示设置</Title>
          
          <div className="setting-item">
            <div className="setting-label">
              <Text>显示LOGO</Text>
            </div>
            <Switch
              checked={settings.showLogo}
              onChange={(checked) => handleSettingChange('showLogo', checked)}
            />
          </div>

          <div className="setting-item">
            <div className="setting-label">
              <Text>显示面包屑</Text>
            </div>
            <Switch
              checked={settings.showBreadcrumb}
              onChange={(checked) => handleSettingChange('showBreadcrumb', checked)}
            />
          </div>
        </div>

        <Divider />

        {/* 布局设置 */}
        <div className="setting-section">
          <Title level={5}>布局设置</Title>
          
          <div className="setting-item">
            <div className="setting-label">
              <Text>固定头部</Text>
            </div>
            <Switch
              checked={settings.fixedHeader}
              onChange={(checked) => handleSettingChange('fixedHeader', checked)}
            />
          </div>

          <div className="setting-item">
            <div className="setting-label">
              <Text>固定侧边栏</Text>
            </div>
            <Switch
              checked={settings.fixedSidebar}
              onChange={(checked) => handleSettingChange('fixedSidebar', checked)}
            />
          </div>

          <div className="setting-item">
            <div className="setting-label">
              <Text>开启动画</Text>
            </div>
            <Switch
              checked={settings.enableAnimation}
              onChange={(checked) => handleSettingChange('enableAnimation', checked)}
            />
          </div>
        </div>

        <Divider />

        {/* 重置按钮 */}
        <div className="setting-section">
          <Button 
            type="dashed" 
            block 
            icon={<ReloadOutlined />}
            onClick={handleReset}
          >
            重置所有设置
          </Button>
        </div>
      </div>
    </Drawer>
  )
}

export default ThemeSettings
